<template>
  <ProgressRoot
    :ref="progressRef"
    data-slot="progress"
     :class="
      cn(
        'relative h-2 w-full overflow-hidden rounded-full',
        'bg-slate-200 dark:bg-slate-700',
        className
      )
    "
    v-bind="$attrs"
  >
    <ProgressIndicator
      data-slot="progress-indicator"
      :class="
        cn(
          'h-full w-full flex-1 bg-gradient-to-r shadow-sm',
          'from-blue-500 to-purple-500 dark:from-blue-400 dark:to-purple-400',
          'transition-all duration-300'
        )
      "
      :style="{ transform: `translateX(-${100 - Math.max(0, Math.min(100, modelValue))}%)` }"
    />
  </ProgressRoot>
</template>

<script setup>
import { ProgressIndicator, ProgressRoot } from 'radix-vue'

const props = defineProps({
  className: {
    type: String,
    default: ''
  },
  modelValue: {
    type: Number,
    default: 0
  }
})

const progressRef = ref(null)
defineExpose({progressRef})

// Assuming you have cn utility function available
const cn = (...classes) => classes.filter(Boolean).join(' ')
</script>
